<template>
  <el-card class="yy-search-form" shadow="never" :style="!moudelConfigData.showMore ? 'padding-right:40px':''">
    <el-form :model="queryParams" ref="queryFormRef" :inline="true">
      <el-form-item v-for="(item,index) in showSearchConfig" :label="item.lable" :prop="item.searchKey">
        <template v-if="item.type == 'input'">
          <el-input
            v-model="queryParams[item.searchKey]"
            :placeholder="'请输入'+item.lable"
            @keyup.enter="handleQuery"
            clearable
            style="width: 200px"
          />
        </template>
        <template v-if="item.type == 'select'">
          <el-select
            @change="handleQuery"
            v-model="queryParams[item.searchKey]"
            :multiple="item.multiple"
            :filterable="item.filterable"
            :placeholder="'请选择'+item.lable"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="v in item.optionsConfig?.list||[]"
              :key="v[item.optionsConfig.keyValue?.value||'value']"
              :label="v[item.optionsConfig.keyValue?.key||'label']"
              :value="v[item.optionsConfig.keyValue?.value||'value']"
              :disabled="v.disabled||false"
            />
          </el-select>
        </template>
        <template v-if="item.type == 'date'">
          <el-date-picker
            :type="item.haveTime ? 'datetime' : 'date'"
            v-model="queryParams[item.searchKey]"
            :placeholder="'请选择'+item.lable"
            :date-format="item.dateFormat ? item.dateFormat : 'YYYY-MM-DD'"
            :time-format="item.timeFormat?item.timeFormat : 'HH:mm:ss'"
            :format="item.format ? item.format : (item.haveTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')"
            :value-format="item.format ? item.format : (item.haveTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')"
            clearable
            style="width: 240px"
            @change="handleQuery"
          >
          </el-date-picker>
        </template>
        <template v-if="item.type == 'daterange'">
          <el-date-picker
            :type="item.haveTime ? 'datetimerange' : 'daterange'"
            :range-separator="item.rangeSeparator"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            v-model="queryParams[item.searchKey]"
            :placeholder="'请选择'+item.lable"
            :date-format="item.dateFormat ? item.dateFormat : 'YYYY-MM-DD'"
            :time-format="item.timeFormat?item.timeFormat : 'HH:mm:ss'"
            :format="item.format ? item.format : (item.haveTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')"
            :value-format="item.format ? item.format : (item.haveTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')"
            clearable
            style="width: 440px"
            @change="handleQuery"
          >
          </el-date-picker>
        </template>
      </el-form-item>
      <el-form-item :class="moudelConfigData.showMore ? 'is-more-btns':''">
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button
      class="show-more-control"
      v-if="!moudelConfigData.showMore && props.searchConfig.length > props.showItemLength"
      link
      @click="moudelConfigData.showMore=true"
    >
      展开<el-icon class="el-icon--right"><ArrowDownBold /></el-icon>
    </el-button>
    <el-button
      class="show-more-control"
      v-if="moudelConfigData.showMore && props.searchConfig.length > props.showItemLength"
      link
      @click="moudelConfigData.showMore=false"
    >
      收起<el-icon class="el-icon--right"><ArrowUpBold /></el-icon>
    </el-button>
  </el-card>
</template>

<script setup name="yySearchForm" lang="ts">
import bus from '@/layout/components/bus'
const props = defineProps({
  searchConfig: {
    default:[]
  },
  showItemLength: {
    default: 3
  },
  clearKey: {
    default:[]
  }
})

const emit = defineEmits(["searchEvent"])
const showSearchConfig:any = ref()

const queryParams: any = ref({})
// 组件内部变量 定义
const moudelConfigData = reactive({
  showMore:false,//搜索条件显示更多 控制
})

watch(() => moudelConfigData.showMore, (val:any) => {
  if (!val) {
    showSearchConfig.value = props.searchConfig.slice(0,props.showItemLength||3)
  }
  else {
    showSearchConfig.value = props.searchConfig
  }
  bus.emit("showSearchConfig",{val:val})
}, { immediate: true })

watch(() => props.clearKey, (val: any) => {
  if (val && val.length) {
    for (const key in queryParams.value) {
        if (val.indexOf(key) != -1) {
          queryParams.value[key] = ""
        }
      }
  }

},{immediate:true,deep:true})
// 搜索
const handleQuery = () => {
  emit("searchEvent",queryParams.value)
}

// 重置
const queryFormRef = ref()
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}
onMounted(() => {

})
</script>

<style lang="scss" scoped>
.yy-search-form{
  position: relative;
}
.show-more-control{
  position: absolute;
  bottom: 30px;
  right: 20px;
}
.is-more-btns{
  display: block;
  padding-right: 30px;
  :deep(.el-form-item__content){
    justify-content: flex-end;
  }
}
</style>
